<template>
   <a-table :loading="loading" :columns="columns" :data-source="rows" :pagination="pagination" bordered :rowSelection="rowSelection" rowKey="id">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'index'">
          <span>{{ ((pagination.current - 1) * pagination.pageSize) + index + 1 }}</span>
        </template>        
        <template v-if="column.dataIndex === 'name'">
          <StoreLink :item="record" />
        </template>        
        <template v-if="column.dataIndex === 'verified'">
          <a-tag color="green" v-if="record.verified">已认证</a-tag>
          <span v-else>未认证</span>
        </template>        
            
        <template v-if="column.key === 'action'">
          <slot name="action" :record="record"></slot>
        </template>
      </template>
    </a-table>
</template>

<script setup>
import {ref,onMounted,reactive,watch , computed,toRaw} from 'vue';
import { listStore } from '@/api/store'
import StoreLink from '@/components/StoreLink.vue';


const props = defineProps({
  action:{
    type: Boolean,
    default: ()=> true,
  },
  select:{
    type: Boolean,
    default: ()=> false,
  },
  selectType:{
    type: String,
    default: ()=> 'checkbox',
  },
  filter:{
    type:Object,
    default: ()=> ({})
  }
})

const emit = defineEmits(['select'])

const loading = ref(false)
const rows = ref([])
const pagination = reactive({
  pageSize: 10,
  current: 1,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共${total}条`,
  onChange: (page,size) => {
    pagination.pageSize = size
    load(page)
  }
})

const columns = ref([
  {
    title: '序号',
    key: 'index',
    width: 70,
    align: 'center'
  }, 
  {
    title: '名称',
    dataIndex: 'name',
  }, 
  {
    title: '负责人',
    dataIndex: 'contactUser',
    width: 100,
    align: 'center'
  }, 
  {
    title: '手机号',
    dataIndex: 'contactPhone',
    width: 120,
    align: 'center'
  }, 
  {
    title: '地址',
    dataIndex: 'address',
  },
  {
    title: '认证',
    dataIndex: 'verified',
  },
])

const selectedRowKeys = ref([])

const rowSelection = computed(()=>{

  if(props.select){
    return {
      type: props.selectType,
      selectedRowKeys: selectedRowKeys.value,
      onChange: (keys,rows)=>{
        selectedRowKeys.value = keys
        // 
        emit('select', toRaw(rows) )
      }
    }
  }

  return undefined
})

onMounted(()=>{
  parseColumn()
  load(1)
})

watch(()=>props.filter,()=>{
  load(1)
})

const parseColumn = ()=>{
  if(props.action){
    const arr = columns.value
    arr.push({
    title: '操作',
    key: 'action',
    width: 100
  },)
    columns.value = [...arr]
  }

  if(props.select){
    const arr =  columns.value
    arr.splice(0,1)
    columns.value = [...arr]
  }
}

const load = async (page = 1) => {
  const params = {
    page,
    size: pagination.pageSize,
  }
  if (props.filter) {
    for (const key in props.filter) {
      const val = props.filter[key]
      if (val) {
        params[key] = val;
      }
    }
  }
  loading.value = true;
  const res = await listStore(params);
  loading.value = false;
  if (res.data) {
    const { total, records } = res.data;
    pagination.total = total
    pagination.current = page
    rows.value = records
  }
}

const refresh = ()=>{
  load(1)
}

defineExpose({
  refresh,
})

</script>

<style lang="less" scoped>

</style>